var CDetail = Vue.component('CDetail', {

    data() {
        return {
            detailNav: [ // nav数据
                {
                    id: 0,
                    name: '外发货单'
                },{
                    id: 1,
                    name: '产品名录' 
                },{
                    id: 2,
                    name: '企业介绍' 
                }
            ],
            type: 0 // nav类型
        }
    },
    
    template: `<div class="">
                <div class="custom__detail__nav" @click="setNavFun">
                    <span v-for="(item, index) in detailNav" :class="{spanSelect: type == index}" :data-type="index">{{item.name}}</span>
                    <span>>返回客户</span>
                </div>
                <div class="custom__detail__info">
                    <!-- 外发货单 -->
                    <ul v-show="type == 0">
                        <li>
                            <img src="" alt="">
                            <div class="custom__detail__right">
                                <p>产品名称：</p>
                                <p>加工件数：</p>
                                <p>有效期限：</p>
                                <p>预算总额：</p>
                                <a href="javascript:;" data-id="0" @click="goDetailFun">>详情</a>
                            </div>
                        </li>
                        <li>
                            <img src="" alt="">
                            <div class="custom__detail__right">
                                <p>产品名称：</p>
                                <p>加工件数：</p>
                                <p>有效期限：</p>
                                <p>预算总额：</p>
                                <a href="javascript:;" data-id="0" @click="goDetailFun">>详情</a>
                            </div>
                        </li>
                        <li>
                            <img src="" alt="">
                            <div class="custom__detail__right">
                                <p>产品名称：</p>
                                <p>加工件数：</p>
                                <p>有效期限：</p>
                                <p>预算总额：</p>
                                <a href="javascript:;" data-id="0" @click="goDetailFun">>详情</a>
                            </div>
                        </li>
                    </ul>
                    <!-- 产品名录 -->
                    <div v-show="type == 1" class="custom__detail__product">
                        <table>
                            <tbody>
                                <tr>
                                    <th colspan="2">针织类</th>
                                </tr>
                                <tr>
                                    <td>
                                        <span>产品名称</span>
                                    </td>
                                    <td>
                                        <span>男装、女装、童装</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- 企业介绍 -->
                    <div v-show="type == 2" class="custom__detail__company">
                        <table>
                            <tbody>
                                <tr>
                                    <th colspan="2">企业介绍</th>
                                </tr>
                                <tr>
                                    <td>
                                        <span>产品名称</span>
                                    </td>
                                    <td>
                                        <span>男装、女装、童装</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                </div>`,
    methods: {
        setNavFun: function (e) { // nav点击
            let type = e.target.dataset.type
            this.type = type
        },
        goDetailFun: function (e) { // 货单详情
            let id = e.target.dataset.id
            let router_click = this.$router.resolve({
                name: 'MDetail',
                query: {
                    id: id
                }
            })
            window.open(router_click.href, '_blank')
        }
    },
    created: function () {
        
    },
    mounted: function () {

    },
})